微信小程序:完成一个tabbar下拉刷新组件需要经过什么坑？

在最近的微信小程序开发中，我遇到了一个比较坑的界面开发，说坑不是因为难，而是因为包含了太多的坑，开发的时候填不进去。今天我就把这些填好的坑一个个挖出来，细细咀嚼，作为演示分享。

简单整理一下需求：1.tabbar后面需要跟固定的2。它需要上拉刷新和下拉加载的功能。

需求很简单，看起来每一个都不是很难，但是有很多小坑洞需要小心填充。第一个要求，位置：固定；直接实现，没有任何困难。

紧接在面对上拉刷新和下拉加载的功能后，主要有两种实现方式：1。1.scroll-view的上下监视器功能，分别在触摸顶部和底部时执行上拉刷新和下拉刷新机制。2.微信api的两个功能onReachBottom和onPullDownFresh分别是触底执行和下拉刷新。

我们先介绍两种方法：1。使用滚动视图放置列表显示页面，将产品列表粘贴到滚动视图上，并使用幻灯片属性在其中显示产品。当滚动视图触底时，会触发bindtaplower的绑定功能，达到“下拉刷新”的效果。2.使用页面标签附带的onReachBottom实现下拉加载和上拉刷新。两个API属于各自的API，这个上拉刷新也附带了一个刷新动画。

两种方法各有特点和优势。就个人发展偏好而言，第二种方式，即OnReachBottom和onPullDownFresh，在单个列表中优于第一种方式。为什么呢？因为它自带下拉刷新动画。带滚动视图的上拉刷新不会带来此动画。所以谁更好就不用说了。

那么，我们应该如何恰当地使用这两种方案呢？

微信小程序是一个非常简单的前端程序，但是它包含了很多各种大小的坑。比如在滚动查看的触摸功能中，会出现多次执行触摸的问题，即触摸执行的判断次数过多，导致其疯狂触发功能。

面对这样的bug，我首先想到的就是把它们锁起来。每次执行函数时关闭锁，然后在函数行的末尾打开锁。这样就可以解决函数重复执行的问题。

上拉加载功能

upper:函数(){ var=this var timestamp=Date . parse(new Date())/1000；var time=this . data . lastloadtimeif(timestamp-last time 5){ console . log('过早')} else { that . setdata({ lastloadtime 3360 timestamp })If(this . data . pullpallow){ console . log(' refresh ')that . setdata({ pullpallow : false })wx . shownavigationbar loading()//load console . log(that . data . class idow)wx . request显示在标题栏({URL 3360' …'，=0) {让shoppingDetail=res.data.data

虽然可以解决下拉刷新触发过多的问题，但因为上拉刷新的硬伤，所以我认为，在能使用onReachBottom的情况下，不要去使用scroll-view来写。因为上拉加载时，用Scroll-viewl动画提示用户在下拉刷新时，用的是showNavigationBarLoading()这个api，他做到的是在标题上加入一个旋转的小动画。但是使用这个api时，会产生的一个问题就是，如果在上拉加载时不放手时，还是会疯狂触发上拉刷新的bug，这是后标题会疯狂鬼畜的抖动。这时候，我想到的解决方案是给上拉再次加入一个时间锁。在三秒之内，再次触发刷新时，禁止它的触发。而自带的onReachBottom 将不会再触发这类问题，因为它要真真实实的上拉，所以综上所述，如果能用onReachBottom ，辣就不要用scroll-view来写上拉刷新啦，因为真的没那么好用的。

如果你以为这就结束了？

上一段说了，如果如果能用onReachBottom ，就用这个，那么什么情况下不能用呢？这就关系到一开始说的需求了，需求上是关系到一个需要position:fixed的属性的。那么，我们就要面临一个问题了。如果用的是view 标签，在拉到1/2 时，做tab切换，时候就面临一个问题：它的切换并不会切到顶部，而出现的也是在刷新之后的1/2处，这个体验非常不人性化。那么，在面对需要置顶的情况下，view的使用就会面临一个瓶颈了。如何让view置顶？这是个问题。

我的解决方案是：scroll-view 在每次切换时，让scrollTop行内标签归零，这样就可以让每次切换置顶了。而因为scrolltop一开始就为0，第一次的上拉刷新是不会触发的。在这样的场景下，目前还是用scroll-view 来的更为简便。

这是最近开发的一个tabbar + 下拉刷新的demo，如果有需要，就到github里来取吧，如果可以的话记得给个小星星哟~

版权声明：微信小程序:完成一个tabbar下拉刷新组件需要经过什么坑？是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益，请联系本站底部QQ或者邮箱删除。